<template>
    <div class="my-wrap">
      <div class="personArea">
          <div class="insideArea" v-if="is_login==1">
            <img :src="data1.head_ico" alt="">
            <div class="message">
              <p class="name">{{data1.user_name}}</p>
              <p class="idValue">ID：{{data1.user_no}}</p>
            </div>
            <div class="signOut">
              <p @click="signOut">退出登录</p>
            </div>
          </div>
          <div class="insideArea" v-else>
            <div class="signIn" v-if="isNone">
              <p @click="login">请登录</p>
            </div>
          </div>
          <div class="balance">
            <p>账户余额：<span>￥{{data1.balance}}</span></p>
          </div>
        </div>
      <div class="myOrder">
        <div style="width: 100vw;height: 10.67vw;border-bottom: 1px solid #f5f5f5">
          <p class="myList" style="color: #333;font-size: 15px;">
            我的订单
            <router-link to="/myOrder?active=0">
              <span style="font-size: 12px;color: #666;">查看全部订单
              <img src="../../assets/img/rectang.png" alt=""
                   style="width: 2.06vw;height: 2vw;float: right;position:relative;top: 4.3vw;left: .5vw;">
            </span>
            </router-link>
          </p>
          <div class="wait" align="center">
            <div class="pay">
              <router-link to="/myOrder?active=1">
              <span class="num" v-if="data1.unpay">{{data1.unpay}}</span>
              <img src="../../assets/img/Payment@2x.png" alt="">
              <p>待付款</p>
              </router-link>
            </div>
            <div class="getGoods">
              <router-link to="/myOrder?active=2">
              <span class="num" v-if="data1.unsend">{{data1.unsend}}</span>
              <img src="../../assets/img/GoodsReceipt@2x.png" alt="">
              <p>待发货</p>
              </router-link>
            </div>
            <div class="receive">
              <router-link to="/myOrder?active=3">
              <span class="num" v-if="data1.unaccept">{{data1.unaccept}}</span>
              <img src="../../assets/img/DeliverGoods@2x.png" alt="">
              <p>待收货</p>
              </router-link>
            </div>
            <div class="comment">
              <router-link to="/myOrder?active=4">
              <span class="num" v-if="data1.uncomment">{{data1.uncomment}}</span>
              <img src="../../assets/img/evaluate@2x.png" alt="">
              <p>待评价</p>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="functionArea" align="center">
        <router-link to="/enjoy">
          <div>
            <img src="../../assets/img/ic_xinyuan@2x.png" alt="">
            <p>心愿单</p>
          </div>
        </router-link>
        <router-link to="/myCoupon">
          <div>
            <img src="../../assets/img/ic_youhuiquan@2x.png" alt="">
            <p>优惠券</p>
          </div>
        </router-link>
        <router-link to="myHistory">
          <div>
            <img src="../../assets/img/ic_zuji@2x.png" alt="">
            <p>足迹</p>
          </div>
        </router-link>
        <router-link to="/myAddress">
          <div>
            <img src="../../assets/img/ic_shouhuo@2x.png" alt="">
            <p>地址</p>
          </div>
        </router-link>
        <!--<router-link to="/notecase">-->
          <div @click="historys">
            <img src="../../assets/img/ic_qianbao@2x.png" alt="">
            <p>钱包</p>
          </div>
        <!--</router-link>-->
        <div @click="toCustom">
          <img src="../../assets/img/ic_bangzhu@2x.png" alt="">
          <p>客服</p>
        </div>
      </div>
      <Footer :type="3"></Footer>
    </div>
</template>

<script>
    import request from '../../request/index'
    import Footer from "@/components/common/Footer"
    import { Dialog } from 'vant';
    export default {
        components: {
            Footer
        },
      data(){
          return{
            data1:[],
            is_login:false,
            isNone:false,
        }
      },
      created(){
        request.getpersonInformation(this);
      },
      methods:{
        toCustom(){
          document.getElementById('YSF-BTN-HOLDER').onclick();
        },
        historys(){
          // this.$toast("该功能暂未开放")
          this.$router.push({
            path:'/notecase',
          })
        },
        signOut(){
          Dialog.confirm({
            message: '是否确认退出登录'
          }).then(() => {
            localStorage.clear();
            this.$toast("退出成功");
            this.$router.push({
              path:'/login'
            })
          }).catch(() => {
            // on cancel
          });

        },
        login(){
          this.$router.push({
            path:'/login',
          })
        }
      },
        mounted() {
            document.title = "我的";
        }
    }
</script>

<style scoped lang="scss">
.my-wrap{
  background: #f5f5f5;
  width: 100vw;
  height: 100vh;
}
.personArea{
  width: 100vw;
  height:29.33vw;
  background:linear-gradient(-90deg,rgba(255,140,140,1) 0%,rgba(255,166,166,1) 100%);
  .balance{
    width: 92vw;
    height: 13.3vw;
    background:rgba(255,255,255,1);
    box-shadow:0px 4px 16px 0px rgba(255,153,173,0.2);
    border-radius:3.5vw;
    margin: 0px auto;
    position: relative;
    top: -5vw;
    p{
      font-family:PingFang-SC-Regular;
      font-weight:400;
      color:rgba(51,51,51,1);
      line-height:13.3vw;
      text-indent: 8vw;
      font-size: 14px;
      span{
        font-size:16px;
        font-family:PingFang-SC-Heavy;
        font-weight:800;
        color:rgba(255,89,89,1);
        line-height:13.3vw;
      }
    }
  }
  .signOut{
    p{
      display: inline-block;
      float: right;
      margin-top: 7vw;
      color: #fff;
      font-size: 15px;
    }
  }
  .signIn{
    padding-top: 7vw;
    color: #fff;
    font-size: 15px;
  }
  .insideArea{
      width:92vw;
      height:100%;
      margin: 0px auto;
        .name{
          margin-top: 7vw;
        }
        img{
          width:14.67vw;
          height:14.67vw;
          float: left;
          margin-top: 4.3vw;
        }
        .message{
          float: left;
          margin-left: 3.3vw;
            .name{
              font-size: 16px;
              color: #fff;
            }
          .idValue{
            font-size: 13px;
            color: #fff;
          }
        }
    }
}
.myOrder{
  width: 100vw;
  height:27vw ;
  background: #fff;
  margin-top: 12vw;
  .wait{
    width: 100vw;
    height: 17.87vw;
    display: flex;
    text-align:center;
    div{
       flex: 1;
       position: relative;;
       span{
         width:4vw;
         height: 4vw;
         position: absolute;
         border: 1px solid #ff4c50;
         border-radius: 50%;
         display: inline-block;
         color: #ff4c50;
         line-height: 4vw;
         font-weight: 600;
         background: #fff;
         left: 14vw;
         top: 2vw;
         font-size: 10px ;
       }
       p{
         color: #777777;
         font-size: 11px;
         line-height: 7vw;
       }
       img{
         width: 5.3vw;
         height: 5.3vw;
         margin-top: 3vw;
       }
     }
  }
    .myList{
      width: 92vw;
      height:10.67vw ;
      margin: 0px auto;
      background: #fff;
      font-size: 15px;
      color: #333;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:10.67vw;
      border-bottom: 1px solid #f5f5f5;
      span{
        float: right;
        margin-right: 1vw;
      }
    }
}
.functionArea{
  width: 100vw;
  margin-top: 8vw;
  background: #fff;
   div{
     width: 32vw;
     height: 29.3vw;
     padding-top: 4.2vw;
     display: inline-block;
     border-bottom: 1px solid #f5f5f5;
     p{
       font-size: 13px;
       color: #333;
       line-height: 10vw;
     }
     img{
       width: 13.33vw;
       height:13.33vw;
     }
   }
}
</style>
